<template>
  <div class="log-container" :class="{ 'full-screen-log': isFullScreen }">
    <codemirror
      :modelValue="model"
      style="height: 100%; width: 100%; border-radius: 3px"
      disabled
      @ready="handleReady"
      @update:modelValue="handleChange"
    />
    <div class="log-tool">
        <a-button size="small" v-if="!isFullScreen" :icon="h(FullscreenOutlined)" @click="toggleFullScreen"/>
        <a-button size="small" v-else :icon="h(FullscreenExitOutlined)" @click="toggleFullScreen"/>
    </div>
  </div>
</template>

<script setup>
import { ref, shallowRef, h } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { EditorView } from '@codemirror/view'
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';

const model = defineModel()

const view = shallowRef()
const handleReady = (payload) => {
  view.value = payload.view
}
const handleChange = (ditto) => {
  view.value.dispatch({
    effects: EditorView.scrollIntoView(view.value.state.doc.length)
  })
}

const isFullScreen = ref(false)

const toggleFullScreen = () => isFullScreen.value = !isFullScreen.value

</script>
<style scoped>
.log-container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 10px;
}

.full-screen-log {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

.log-tool {
    position: absolute;
    right: 15px;
    top: 15px;
}

:deep(.cm-content) {
  white-space: normal;
  flex-shrink: 1;
  word-break: break-all;
}
</style>